import styles from './index.module.scss'
import Button from '@c/button'
import { useVipDialog, useShowLogin } from '@/utils/hooks'
import { vodOpenVipExport, channelOpenVipExport, openPayModalReport } from '@/utils/report'
import { userInfo, cacheLineState } from '@/store'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { videoProps } from '../video/react-video/store'
import cm from 'classnames'

const Index = props => {
  const updateLineState = useSetRecoilState(cacheLineState)
  const videoInfo = useRecoilValue(videoProps)
  const { isLive, notVip, clearErrorCode, lineArr } = props
  const user = useRecoilValue(userInfo)
  const showVipDialog = useVipDialog()
  const showLogin = useShowLogin()
  const toVip = () => {
    let label = videoInfo.keywords
    try {
      label = label.split(',')
    } catch (error) {
    } finally {
      label.length = 3
    }

    if (user?.email && user.token) {
      if (isLive) {
        channelOpenVipExport({
          channel_name: videoInfo.name,
          login_type: '是',
          channel_vip_remind: '直播播放页'
        })
      } else {
        vodOpenVipExport({
          content_name: videoInfo.name,
          t_tag: label[0],
          c_tag: label[1],
          p_tag: label[2],
          login_type: '是',
          vod_vip_remind: '最优线路'
        })
      }
      openPayModalReport({
        isLogin: 'true',
        user_type: user?.isVip ? '会员' : '非会员'
      })
      showVipDialog(1)
    } else {
      if (videoInfo.isLive) {
        channelOpenVipExport({
          channel_name: videoInfo.name,
          login_type: '否',
          channel_vip_remind: '直播播放页'
        })
      } else {
        vodOpenVipExport({
          content_name: videoInfo.name,
          t_tag: label[0],
          c_tag: label[1],
          p_tag: label[2],
          login_type: '否',
          vod_vip_remind: '最优线路'
        })
      }
      showLogin()
    }
  }

  const firstNormalLine = lineArr.find(item => !item.isOfficial)
  const toNormal = () => {
    if (firstNormalLine) {
      updateLineState({ ...firstNormalLine })
    }
    clearErrorCode()
  }
  return (
    <div className={styles.click}>
      <p className={styles.getVipText}>
        {isLive ? '电视直播是会员专享内容，请开通后观看' : '本线路是会员专享线路，请开通VIP后观看'}
      </p>
      <Button className={cm(styles.getVip, !isLive ? styles.getVipVod : '')} onClick={toVip}>
        {isLive ? '开通VIP' : 'VIP畅享最优播放体验>>'}
      </Button>
      <img src="/images/sport-vip.webp" alt="开通VIP" className={cm(styles.getVipImg, 'hideWhenPhone')} />
      {!isLive && !notVip && (
        <div className={styles.normal} onClick={toNormal}>
          切换至普通线路<span>(多广告)</span>
        </div>
      )}
      {notVip && <p className={styles.normal}>当前普通线路无播放资源</p>}
    </div>
  )
}

export default Index
